<template>
  <view class="form-item">
    <text class="label">起卦方式</text>
    <view class="method-options">
      <view class="dropdown" @click="showMethodDropdown">
        <text class="dropdown-label">{{ formData.method.label }}</text>
        <image class="dropdown-icon" src="/static/images/arrow_down.png" mode="aspectFit" />
      </view>
      <uni-popup ref="yaoPopup" type="bottom" background-color="#fff">
        <view class="yao-popup">
          <view class="popup-header">
            <text>起卦方式</text>
            <text @tap="closeYaoSelector">取消</text>
          </view>
          <view class="popup-content">
            <view 
               v-for="(option, index) in methodList" 
               :key="option.value"
                class="yao-option"
               :class="{ active: formData.method.value === option.value }"
               @tap ="onMethodChange(option)"
               >
             {{ option.label }}
            </view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  name: 'QiGuaSelector',
  props: {
    formData: {
      type: Object,
      default: () => ({
        method: { label: '手动起卦', value: 'manual' },
      })
    }
  },
  data() {
    return {
      methodList: [
        { label: '手动起卦', value: 'manual' },
        { label: '在线起卦', value: 'online' }
      ]
    };
  },
  methods: {
    showMethodDropdown() {
      this.$refs.yaoPopup.open();
    },
    onMethodChange(method) {
      this.$emit('update:formData', {...this.formData, method: method });
      this.$refs.yaoPopup.close();
    },
    closeYaoSelector() {
      this.$refs.yaoPopup.close();
    }
  }
};
</script>

<style>
.dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  background-color: #f7f7f7;
  border-radius: 8rpx;
  padding: 0 20rpx;
}

.dropdown-label {
  font-size: 28rpx;
  color: #333;
}

.dropdown-icon {
  width: 24rpx;
  height: 24rpx;
}

.dropdown-content {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
}

.dropdown-item {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  cursor: pointer;
}

.dropdown-item.active {
  color: #3872FE;
}
.yao-popup {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  
 .popup-header {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1px solid #eee;
    
    text {
      font-size: 32rpx;
      color: #333;
      
      &:last-child {
        color: #666;
      }
    }
  }
  
 .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;     
    padding: 20rpx 30rpx;;
    max-height: 600rpx;
    overflow-y: auto;
   .yao-option {
      width: 100%; 
      display: flex;
      flex-direction: column;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center; 
      font-size: 28rpx;
      color: #333;
      border-bottom: 1px solid #eee;
      &.active {
        color: #3872FE;
      }
    }
  }
}
</style>